<template>
  <div class="build-el-perview-imgs flex-al">
    <el-carousel class="main-img" style="height: 195px;">
      <el-carousel-item v-for="img in imgs" :key="img" class="main-img" style="height: 195px;">
        <el-image class="main-img" style="height: 195px;" :src="img" fit="cover" />
      </el-carousel-item>
    </el-carousel>

    <!-- <div class="img-box">
        <el-image
        v-for="item in 9"
        :key="item"
          class="img-con-main"
          src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2534506313,1688529724&fm=26&gp=0.jpg"
          fit="cover"
        />
        <el-image
          class="img-con-main"
          src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2534506313,1688529724&fm=26&gp=0.jpg"
          fit="cover"
        />
    </div>-->
  </div>
</template>
<script>
export default {
  props: {
    imgs: Array,
  },
}
</script>
<style lang="less" scoped>
.build-el-perview-imgs {
  .main-img {
    width: 100%;
    height: 195px;
    border-radius: 6px;
    overflow: hidden;
  }
  .img-box {
    margin-top: 20px;
    width: 100%;
    height: 73px;
    overflow-x: auto;
    overflow-y: auto;
    .img-con-main {
      width: 104px;
      height: 73px;
      border-radius: 3px;
      margin-right: 10px;
    }
  }
}
</style>
